<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .app{
      width: 400px;
      height: 400px;
      background: hsl(20,40%,90%);
      background-image: linear-gradient(90deg,#fb3 10px, transparent 0),linear-gradient(90deg,#ab4 20px, transparent 0),linear-gradient(90deg,#655 10px, transparent 0);
      background-size: 80px 100%,60px 100%,40px 100%;
    }
    /**
      这样一来,背景其实还是有规律的,但是不容易被发现
      奇怪,为什么会这样呢?
      这些条纹每个240px就会重复一次
      为啥?我们来看 80px 60px 40px 的最小公倍数就是240px


     */
  </style>
</head>
<body>
<!--
  伪随机背景是建立在css渐变,条纹背景和复杂背景图案上的

  重复的平铺的几何图案难免有些呆板,在现实中往往伴随着多样性和随机性
  在css中本身没有任何随机功能
  那么接下来我们就需要去解决这个问题

-->
<div class="app"></div>
</body>
</html>
